<script setup lang="ts">
 
//@ts-ignore
import Speech from 'speak-tts';


const speech = new Speech();
if (speech.hasBrowserSupport()) {
    console.log("语音引擎加载成功,支持播报");
} else {
    console.log("此浏览器不支持语音播报");
}

speech.init({
    volume: 0.6, // 音量0-1
    lang: "en", // 语言
    rate: 1, // 语速1为正常速度，2为两倍速
    pitch: 1, // 音调
    //voice: "Microsoft Kangkang - Chinese (Simplified, PRC)" // 语音类型
});


const speechCn = new Speech();
speechCn.init({
    volume: 0.9, // 音量0-1
    lang: "zh-CN", // 语言
    rate: 1, // 语速1为正常速度，2为两倍速
    pitch: 1, // 音调
    //voice: "Microsoft Kangkang - Chinese (Simplified, PRC)" // 语音类型
});

 
const words1 = ['peach','banana','apple','watermelon','orange'];
const words2 = ['fish','puppy','bird','kitten','chicken'];
const words3 = ['grandpa','mom','grandma','jinjin','dad'];
const words4 = ['red','orange','pink','yellow','green'];
const words5 = ['eraser','ruler','a bag','marker','pencil'];

const words6 = ['five finishes','three erasers','four bananas','two pencils','one watermelon'];

const words7 = ['an apple for Jinjin','a banana for mon','an orange for dad','a peach for grandma','a watermelon for grandpa'];

const words8 = ['zh_第一题，早上起来，你会对妈妈说','A,hello ',"B,good morning"];
const words9 = ['zh_第二题你想知道哪个书包是什么颜色，你应该问：','A,what colour ',"B,how many"];
const words10 = ['zh_第三题你递给天天一个梨，然后说：','A,Here you are ',"B,hello "];
const words11 = ['zh_第四题你想知道有多少支铅笔，你应该问：','A,what colour ',"B,how many pencils "];
const words12 = ['zh_第五题你想向别人介绍你的妈妈，你说：','A,Look , my mom ',"B,Look my dad"];
const words13 = ['zh_第六题你想向对方要一把尺子应该说：','A,Give me a ruler please',"B,Give me a pencil please"];
const words14 = ['zh_第七题当别人向你道谢时，你应该说：','A,Here you are',"B,you are welcome"];
const words15 = ['zh_第八题你想要一支铅笔，你应该说：','A,I want a pencil',"B,I want a bag"];


const wordsList = [
  '',words1,words2,words3,words4,words5,words6,words7,words8,words9,words10,words11,words12,words13,words14,words15
]

const handleReadWords = (itemIndex:number)=>{
  duration = 2000;
  if(itemIndex == 1)readingWords = words1;
  if(itemIndex == 2)readingWords = words2;
  if(itemIndex == 3)readingWords = words3;
  if(itemIndex == 4)readingWords = words4;
  if(itemIndex == 5)readingWords = words5;
  if(itemIndex == 6)readingWords = words6;
  if(itemIndex == 7){
    readingWords = words7;
    duration = 3000;
  }

  if(itemIndex == 8){
    readingWords = words8;
    duration = 1000;
  }

  
  if(itemIndex == 9){
    readingWords = words9;
    duration = 1000;
  }

  if(itemIndex >= 8 && itemIndex<=15){
    duration = 500;
  }

  //@ts-ignore
  readingWords = wordsList[itemIndex];

  
  readingIndex = 0;
   speakWord();
   
}

var readingWords:string[];
var readingIndex = 0;
var duration = 2000;
const speakWord = ()=>{
  
  if(readingIndex >= readingWords.length) return;
  const text = readingWords[readingIndex];

  console.log('reading text:'+text)

  if(text.indexOf('zh_') != -1){
    speakChinese(text.substring(3))
  }else{
    speakEnglish(text)
  }

}

const speakEnglish = (text:string)=>{
  speech.speak({ text,
    listeners: {
       
        onend: () => {
            console.log("End utterance")
           setTimeout(()=>{
            readingIndex++;
            speakWord();
           },duration);
        },
        
    }
  }) 
}

const speakChinese = (text:string)=>{
  speechCn.speak({ text,
    listeners: {
       
        onend: () => {
            console.log("End utterance")
           setTimeout(()=>{
            readingIndex++;
            speakWord();
           },0);
        },
        
    }
  }) 
}
</script>

<template>
  <div v-for="item in 5" class="item">
    第一（{{item}}）题：<button @click="handleReadWords(item)">读</button>
  </div>

  <div  class="item">
    第二题：<button @click="handleReadWords(6)">读</button>
  </div>

  
  <div  class="item">
    第三题：<button @click="handleReadWords(7)">读</button>
  </div>

  <div  class="item" v-for="item in 8">
    第四({{ item }})题：<button @click="handleReadWords(7+item)">读</button>
  </div>
   
</template>

<style scoped>
 .item{
   margin-top: 15px;
   margin-bottom: 15px;
 }
 
</style>
